<template>
  <div>
    <van-nav-bar
  title="城市列表"
  left-arrow
/>
    <van-index-bar>
      <van-index-anchor index="当前城市" />
  <van-cell :title="citys" />
      <div v-for="(item,i) in newCity" :key="i">
        <van-index-anchor :index="i" />
        <van-cell v-for="(item2,i2) in item" :key="i2" :title="item2.label" @click="sitys(item2)" />
      </div>

    </van-index-bar>
  </div>
</template>

<script>

import { conkeyAPI } from '@/api/index.js'

export default {
  data () {
    return {
      english: [],
      city: [],
      search: '',
      newCity: []
    }
  },
  async created () {
    const { data: res } = await conkeyAPI()
    // console.log(res)
    const alphabet = Array.from(new Array(26), (ele, index) => {
      return String.fromCharCode(65 + index)
    })
    this.english = alphabet
    this.city = res.body
    const cityName = {}
    // 循环26个字母的数组
    this.english.forEach(item => {
      cityName[item] = []
      this.city.forEach(el => {
        // 对比开头字母是否对应
        const first = el.pinyin.substring(0, 1).toUpperCase()
        if (first === item) {
          cityName[item].push(el)
        }
      })
    })
    this.$nextTick(() => {
      this.city = cityName
    })
    this.newCity = cityName
  },
  methods: {

    sitys (item) {
      window.localStorage.setItem('value', item.value)
      window.localStorage.setItem('label', item.label)
      this.$router.push('/home/list')
    }
  },
  computed: {
    citys () {
      return window.localStorage.getItem('label')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__content{
  background-color: #58b67f;
}
/deep/.van-nav-bar__title{
  color: #fff;
}
/deep/.van-icon{
color: #fff;
}
</style>
